<template>
    <div>
        <el-tabs tab-position="top" v-model="activeName">
            <!-- 审批材料 -->
            <el-tab-pane :label="$i18n.t('APPROVE_INFO')" name="default">
                <approve-material />
            </el-tab-pane>
            <!-- 提醒短信 -->
            <el-tab-pane :label="$i18n.t('REMINDER_MESSAGE')" name="sms">
                <approve-s-m-s v-if="activeName === 'sms'" />
            </el-tab-pane>
            <!-- 电话审批 -->
            <el-tab-pane :label="$i18n.t('TEL_APPROVE')" name="tel">
                <approve-tel v-if="activeName === 'tel'" />
            </el-tab-pane>
            <!-- 跟进状态 -->
            <el-tab-pane :label="$i18n.t('FOLLOW_STATUS')" name="follow">
                <approve-follow v-if="activeName === 'follow'" />
            </el-tab-pane>
            <!-- 审批结论 -->
            <el-tab-pane :label="$i18n.t('APPROVE_RESULT')" name="result">
                <approve-result v-if="activeName === 'result'" />
            </el-tab-pane>
        </el-tabs>

        <!-- 底部工具栏 -->
        <!--<div class="tools">
            <div class="btn">
                <el-tooltip placement="left" :content="$i18n.t('MAKE_CALL')">
                    <el-button circle @click="() => { this.callVisible = true }" class="call">
                        <el-icon class="el-icon-custom-ios-call" style="font-size: 32px;"></el-icon>
                    </el-button>
                </el-tooltip>
            </div>
            <div class="btn">
                <el-popconfirm
                    :title="$i18n.t('CONFIRM_KILL_CALL')"
                    @cancel="() => {}"
                    :confirmButtonText="$i18n.t('CONFIRM')"
                    :cancelButtonText="$i18n.t('CANCEL')"
                >
                    <el-tooltip placement="left" :content="$i18n.t('KILL_CALL')">
                        <el-button circle class="killCall">
                            <el-icon class="el-icon-custom-ios-call" style="font-size: 32px;"></el-icon>
                        </el-button>
                    </el-tooltip>
                </el-popconfirm>
            </div>
            <div class="btn">
                <el-tooltip placement="left" :content="$i18n.t('SEND_MESSAGE')">
                    <el-button circle class="message">
                        <el-icon class="el-icon-custom-ios-chatbubbles" style="font-size: 32px;"></el-icon>
                    </el-button>
                </el-tooltip>
            </div>
        </div>-->
    </div>
</template>

<script>
    import ApproveMaterial from '@/views/approve/components/ApproveMaterial'
    import ApproveSMS from '@/views/approve/components/SMSRecord'
    import ApproveTel from '@/views/approve/components/TELRecord'
    import ApproveFollow from '@/views/approve/components/Follow'
    import ApproveResult from '@/views/approve/components/ApproveResult'

    export default {
        name: 'ApproveDetail',
        components: {
            ApproveResult,
            ApproveFollow,
            ApproveTel,
            ApproveSMS,
            ApproveMaterial
        },
        data () {
            return {
                activeName: 'default'
            }
        }
    }
</script>

<style lang="less" scoped>
    .tools {
        z-index: 999;
        position: fixed;
        bottom: 25px;
        right: 48px;
        .btn {
            margin-bottom: 10px;
            .call {
                background-color: #19be6b;
                color: #fff;
                border-color: #19be6b;
            }
            .killCall {
                width: 50px;
                height: 50px;
                background-color: #ed4014;
                color: #fff;
                border-color: #ed4014
            }
            .message {
                width: 50px;height: 50px;background-color: #f90;color: #fff;border-color: #f90
            }
        }
    }
</style>
